<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1-发ajax请求</title>
</head>

<body>
    <button id="getBtn">GET AJAX</button>
    <button id="postBtn">POST AJAX</button>
    <button id="putBtn">PUT AJAX</button>
    <button id="deleteBtn">Delete AJAX</button>

    <script>
        const getBtn = document.getElementById('getBtn');
        const postBtn = document.getElementById('postBtn');
        const putBtn = document.getElementById('putBtn');
        const deleteBtn = document.getElementById('deleteBtn');

        //发get 类型的ajax请求

        getBtn.onclick = () => {
            //1.创建xhr实例对象
            const xhr = new XMLHttpRequest();
            //2.指定请求头信息 =>初始化请求    还没有发请求
            //请求方式大小写都行
            //默认是true  代表异步
            xhr.open('GET', 'http://localhost:8081/server/2?name=tom&age=11', true);
            //3.发送异步ajax请求(也是http)
            xhr.send() //get请求不能携带请求体,所以没有参数
        }

        //发post类型的请求
        postBtn.onclick = () => {
            //1.创建xhr实例对象
            const xhr = new XMLHttpRequest();
            //2.指定请求头信息 =>初始化请求  还没有发请求
            //请求方式大小写都行
            //默认是true  代表异步
            xhr.open('post', 'http://localhost:8081/server/3?name=tom2&age=12', true);
            //指定请求头 =>  指定请求头数据类型  (两种方式)
            // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=utf-8');
            xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
            //3.发送异步ajax请求(也是http)
            // xhr.send('sex=男&like=foot');
            xhr.send('{"sex":"女","age":"basket"}');
        }

        //发put 类型的请求
        putBtn.onclick = () => {
            //1.创建xhr实例对象
            const xhr = new XMLHttpRequest();
            //2.指定请求头信息 =>初始化请求   还没有发请求
            //请求方式大小写都行
            //默认是true  代表异步
            xhr.open('put','http://localhost:8081/server/4?name=tom3&age=13',true);
            //指定请求头 =>指定请求数据类型(两种方式)
            // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=utf-8');
            xhr.setRequestHeader('Content-Type','application/json;charset=utf-8');
            //3.发送异步ajax请求(也是http)
            // xhr.send('sex=男&like=foot');
            xhr.send('{"sex":"女2"},"like":"basket2"');
        }

        //发delete类型ajax请求
        deleteBtn.onclick=()=>{
            //1.创建xhr实例独享
            constxhr = new XMLHttpRequest();
            //指定请求头信息 =>初始化请求  还没有发请求
            //请求方式 大小写都行
            //默认是true 代表异步
            xhr.open('delete','http://localhost:8081/server/5?name=tom4&age=14',true);
            //指定请求头 =>指定请求数据类型(两种方式)
            // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8',true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            //3.发送异步ajax请求(也是http)
            // xhr.send('sex=男&like=foot');
            xhr.send('{"sex":"女3","like":"basket3"}');
        }
    </script>
</body>

</html>